<template>
  <Modal
      v-model="visible"
      :title="title"
      :width="1024"
      :closable="false"
      :mask-closable="false"
  >
    <div>
      <FormItemPanel>
        <Tag color="primary">【this.pnForm】指向表单VM实例</Tag>
        <Tag color="primary">【this.formData】指向表单数据</Tag>

      </FormItemPanel>
      <div class="editor-top">
        {{eventName}}({{resultValues.toString()}}) {
      </div>
      <CodeEditor v-model="code" :height="350" @on-submit-change="submit"></CodeEditor>
      <div class="editor-top">}</div>
    </div>
    <div slot="footer">
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
<!--      <Button type="primary" @click="submit">确定</Button>-->
    </div>
  </Modal>
</template>

<script>
export default {
  name: "FormItemEventCodeEditor",
  props: {},
  data() {
    return {
      visible: false,
      title: '',
      code: '',
      eventName: '',
      resultValues: []
    }
  },
  mounted() {

  },
  methods: {
    init(title = '', code = '', eventName = '', resultValues = []) {
      this.visible = true
      this.title = title
      this.code = code
      this.eventName = eventName
      this.resultValues = resultValues
    },

    cancel() {
      this.visible = false
    },
    submit() {
      this.visible = false
      this.$emit("confirm", {eventName: this.eventName, code: this.code})
    }
  },
  computed: {

  },
  watch: {}
}
</script>

<style scoped>
  >>> .CodeMirror-gutters {
    left: 0px !important;
  }

  .editor-top {
    padding: 5px 5px 5px 10px;
    background-color: #272822;
    border-left: 1px solid #424242;
    border-right: 1px solid #424242;
    font-size: 13px;
    letter-spacing: 1px;
  }
</style>
